<template>
    <div>
        <h2>新增出库</h2>
        <el-divider></el-divider>
        <el-form :model="form" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label="出库单号" prop="outWarehouseCode">
                        <el-input v-model="form.outWarehouseCode" readonly></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="出库单类型" prop="outWarehouseType">
                        <el-select v-model="form.outWarehouseType" placeholder="请选择" style="width: 100%;"
                            @change="BindSalesList(form.outWarehouseType)">
                            <el-option label="请选择" :value="0"></el-option>
                            <el-option label="销售出库" :value="1"></el-option>
                            <el-option label="调拨出库" :value="2"></el-option>
                            <el-option label="退货出库" :value="3"></el-option>
                        </el-select>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="关联订单号" prop="unitOrderId">
                        <el-autocomplete v-model="form.unitOrderId" :fetch-suggestions="querySearch" placeholder="关联订单号">
                        </el-autocomplete>
                    </el-form-item></el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label="客户编号" prop="customerCode">
                        <el-input v-model="form.customerCode" readonly></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label=" 客户名称" prop="customerName">
                        <el-input v-model="form.customerName" readonly></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0">
                    <el-form-item label="客户联系人" prop="contract">
                        <el-input v-model="form.contract" readonly></el-input>
                    </el-form-item></el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8" :offset="0">
                    <el-form-item label=" 客户联系方式" prop="phone">
                        <el-input v-model="form.phone" readonly></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0"><el-form-item label="制单人" prop="opinion">
                        <el-input v-model="form.opinion"></el-input>
                    </el-form-item></el-col>
                <el-col :span="8" :offset="0"><el-form-item>
                    </el-form-item></el-col>
            </el-row>

            <el-row :gutter="20">

                <el-col :span="8" :offset="0">
                    <el-form-item label="备注" prop="remarks">
                        <el-input type="textarea" v-model="form.remarks" :rows="2" placeholder="请输入内容">
                        </el-input>
                    </el-form-item></el-col>
            </el-row>

        </el-form>
        <h3 class="dot">产品信息</h3>
        <div class="eto">
            <el-button type="primary" @click="productShow">新增产品</el-button>
        </div>
        <el-dialog title="收货地址" :visible.sync="dialogTableVisible" width="60%">
            <div>
                产品编号:<el-input v-model="ProductCode" style="width: 200px"></el-input>
                产品名称:<el-input v-model="ProductName" style="width: 200px"></el-input>
                类型:<el-select v-model="ProductTypeId" placeholder="请选择">
                    <el-option :value="0" label="请选择">请选择 </el-option>
                    <el-option :value="1" label="移动电源">移动电源 </el-option>
                    <el-option :value="2" label="线材类">线材类 </el-option>
                </el-select>
                <el-button type="primary" @click="ProductManagementGetList()">查询</el-button>
            </div>
            <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="productCode" label="产品编号"> </el-table-column>
                <el-table-column prop="productName" label="产品名称"> </el-table-column>
                <el-table-column prop="specs" label="规格"> </el-table-column>

                <el-table-column prop="unit" label="存储单位"> </el-table-column>
                <el-table-column prop="inventory" label="库存数"> </el-table-column>
                <el-table-column prop="packageType" label="包装类型"> </el-table-column>
                <el-table-column prop="price" label="价格"> </el-table-column>
                <el-table-column prop="weight" label="重量"> </el-table-column>
            </el-table>
            <!-- 分页 -->
            <br />
            <div>
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageIndex" :page-sizes="[2, 3, 6, 10]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
                </el-pagination>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="yesshow">确 定</el-button>
            </div>
        </el-dialog>


        <template>
            <el-table :data="productlist" border style="width: 100%" @selection-change="handleSelectionChanges">
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column prop="productName" label="产品名称">
                </el-table-column>
                <el-table-column prop="productCode" label="产品编码">
                </el-table-column>
                <el-table-column prop="specs" label="规格">
                </el-table-column>
                <el-table-column prop="batch" label="批次">
                    <template slot-scope="sc">
                        <el-input v-model="sc.row.batch" style="width: 100px"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="单价">
                    <template slot-scope="sc">
                        <el-input v-model="sc.row.price" style="width: 100px"></el-input>
                    </template>
                </el-table-column>
                <el-table-column prop="outWarehouseNumber" label="出库数">
                    <template slot-scope="scope">
                        <el-input-number v-model="scope.row.outWarehouseNumber" :min="1" :max="scope.row.inventory"
                            label="出库数"></el-input-number>
                    </template>
                </el-table-column>
                <el-table-column prop="price" label="总价">
                    <template slot-scope="sc">
                        {{ (sc.row.price * sc.row.outWarehouseNumber).toFixed(4) }}
                    </template>
                </el-table-column>
            </el-table>
        </template>
        <div class="xxx">
            <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
            <el-button @click="Cancel">返回</el-button>
        </div>

    </div>
</template>
<script>
import { AddOutWare, Getassociation } from "@/api/WarehouseServer/outWarehouseServers";
import { autoGenerateCode } from "@/utils/utils";
import {
    ProductManagementGetList,
} from "@/api/BasicsDatumServer/ProductManagement";
export default {
    //数据
    data() {
        return {
            form: {
                outWarehouseCode: "",
                outWarehouseType: 0,
                unitOrderId: "",
                customerCode: "",
                customerName: "",
                contract: "",
                phone: "",
                opinion: "",
                remarks: "",
            },
            //包含批次、盘点数
            ProductManagementDtolist: [],
            dialogTableVisible: false,
            productlist: [],
            //产品表数据
            tableData: [],
            ProductCode: "",
            ProductName: "",
            ProductTypeId: 0,
            pageIndex: 1,
            pageSize: 2,
            totalCount: 0,
            pageCount: 0,
            multipleSelection: [],
            options: [],
            fces: [],
        }
    },
    //方法
    methods: {
        //添加的多选
        handleSelectionChanges(val) {
            this.ProductManagementDtolist = val;
            console.log(this.ProductManagementDtolist);
        },
        //取消
        Cancel() {
            this.$router.push("/WarehouseManage/outWarehouseMange/outWarehouseList");
        },
        //添加
        submitForm() {
            //非空判断
            if (this.form.outWarehouseType == 0) {
                this.$message({
                    message: '请选择出库类型',
                    type: 'error'
                });
                return;
            }
            if (this.form.unitOrderId == "") {
                this.$message({
                    message: '请选择关联订单号',
                    type: 'error'
                });
                return;
            }
            if (this.form.customerCode == "") {
                this.$message({
                    message: '请选择正确的关联订单号',
                    type: 'error'
                });
                return;
            }
            if (this.form.opinion == "") {
                this.$message({
                    message: '请填写制单人',
                    type: 'error'
                });
                return;
            }

            if (this.ProductManagementDtolist.length == 0) {
                this.$message({
                    message: '请选择要导出的数据',
                    type: 'warning'
                });
                return;
            }
            var myparms = {
                outWarehouseCode: this.form.outWarehouseCode,
                outWarehouseType: this.form.outWarehouseType,
                unitOrderId: this.form.unitOrderId,
                customerCode: this.form.customerCode,
                customerName: this.form.customerName,
                contract: this.form.contract,
                phone: this.form.phone,
                opinion: this.form.opinion,
                creator: this.form.opinion,
                remarks: this.form.remarks,
                outWarehouseDetailDtoPas: this.ProductManagementDtolist,
            }
            console.log(myparms);
            AddOutWare(myparms).then(res => {
                if (res.data.code == 0) {
                    this.$message({
                        message: '添加成功',
                        type: 'success'
                    });
                    this.$router.push("/WarehouseManage/outWarehouseMange/outWarehouseList");
                } else {
                    this.$message.error('添加失败');
                }
            })
        },
        //弹出层
        productShow() {
            this.dialogTableVisible = true;
            this.ProductManagementGetList();
        },
        //点击确定获取产品表数据
        yesshow() {
            this.productlist = this.multipleSelection;
            this.dialogTableVisible = false;
        },
        //获取产品列表多选
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //产品表
        ProductManagementGetList() {
            var params = {
                ProductCode: this.ProductCode,
                ProductName: this.ProductName,
                ProductTypeId: this.ProductTypeId,
                pageIndex: this.pageIndex,
                pageSize: this.pageSize,
            };
            ProductManagementGetList(params).then((res) => {
                this.tableData = res.data.data.result;
                this.totalCount = res.data.data.totalCount;
                this.pageCount = res.data.data.pageCount;
            });
        },
        //产品分页
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.pageSize = val;
            this.ProductManagementGetList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.pageIndex = val;
            this.ProductManagementGetList();
        },
        //联想输入
        BindSalesList(id) {
            var myparms = {
                outWarehouseType: id
            };
            Getassociation(myparms).then(res => {
                this.fces = res.data.data;
                this.options = Array.from(res.data.data, item => ({ value: item.salesCode }));
            });
        },
        //联想输入
        querySearch(queryString, cb) {
            var options = this.options;
            var results = queryString ? options.filter(this.createFilter(queryString)) : options;
            cb(results);
            // this.GetSalesManagementByCode();
        },
        createFilter(queryString) {
            // 返回一个函数，该函数接受一个参数option，用于判断option的值是否以queryString开头
            return (option) => {
                // 返回一个布尔值，表示option的值是否以queryString开头
                return (option.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };

        },
        show() {
            console.log(11112222);
            //遍历 this.options给剩余字段赋值
            this.fces.forEach(item => {
                console.log(item);
                console.log(this.form.unitOrderId);
                if (item.salesCode == this.form.unitOrderId) {
                    console.log(item.clientCode);
                    this.form.customerCode = item.clientCode;
                    this.form.customerName = item.clientName;
                    this.form.contract = item.contacts;
                    this.form.phone = item.phone;
                }
            });
        }

    },
    //监听
    watch: {
        'form.unitOrderId': function (newUnitOrderId, oldUnitOrderId) {
            // This function will be called when unitOrderId changes
            // You can perform your desired actions here
            this.show();
        },
    },
    created() {
        this.form.opinion = sessionStorage.getItem("encode");
    },
    mounted() {
        this.form.outWarehouseCode = autoGenerateCode("CK");
    },
}
</script>
<style>
.dot {
    text-align: left;
}

.eto {
    text-align: right;
}

.xxx {
    margin-top: 10px;
}
</style>